<template>
	<view>
		<u-sticky>
		<view class="bj1">
			<u-search style="width: 250px;position: absolute;top:20px;left: 30px;" bgColor="#ffffff" v-model="keyword" :showAction="false" @search="getunion"></u-search>
			<u-button @click="getunion()" type="primary" style="width: 50px;height: 30px;position: absolute;top:22px;left: 300px;" shape="circle" color="#fff">
				<span style="color: #2BCDDD;font-size: 12px;">搜索</span>
			</u-button>
		</view>
		</u-sticky>
		<view class="sq" v-if="bsid==0">
			<view class="ls">
				<view style="width: 4px;height: 17px;background-color: #FF5E81;margin-left: 10px;margin-top: 10px;border-radius: 15px;display: inline-block"></view>
				<span style="margin-left: 12px;font-size: 14px;color: #333333;"><b>历史搜索</b></span>
				<view @click="dells" style="width: 15px;height: 17px;display: inline-block;margin-left: 260px;"><image src="../../static/indeimg/ljt.png" style="width: 15px;height: 17px;"></image></view>
				<view style="width: 335px;height: 50px;background-color: #FFFFFF;margin-left: 20px;margin-top: 10px;">
					<view class="jl" v-for="item in ss"><span @click="getunions(item.name)" style="color: #FFFFFF;font-size: 14px;margin-left: 10px;">{{item.name}}</span></view>
				</view>
			</view>
			<view class="tl">
				<view style="width: 4px;height: 17px;background-color: #FF5E81;margin-left: 10px;margin-top: 10px;border-radius: 15px;display: inline-block"></view>
				<span style="margin-left: 12px;font-size: 14px;color: #333333;"><b>热门讨论</b></span>
				<view style="width: 15px;height: 17px;display: inline-block;margin-left: 260px;"><image src="../../static/indeimg/yj.png" style="width: 15px;height: 17px;"></image></view>
				<view style="width: 335px;height: 50px;background-color: #FFFFFF;margin-left: 20px;margin-top: 10px;">
					<view style="width: 100%;height: 50px;" v-for="item in discusses">
						<span @click="gototl(item.discussId)" style="color: #333333;font-size: 14px;margin-left: 10px;">{{item.title}}</span>
					</view>
				</view>
			</view>
		</view>
		<view class="yjg" v-if="bsid==1">
			<view class="ljflzong">
				<view style="width: 4px;height: 17px;background-color: #FF5E81;margin-left: 10px;margin-top: 10px;border-radius: 15px;display: inline-block"></view>
				<span style="margin-left: 12px;font-size: 14px;color: #333333;"><b>垃圾分类</b></span>
				<view style="width: 335px;height: 100%;background-color: #FFFFFF;margin-left: 20px;margin-top: 10px;">
					<view class="ljfl" v-for="item in c">
						<!-- <navigator url="fenleixq"></navigator> -->
					<image @click="getclassxq(item.classificationId)" :src="item.imgpash" style="width: 50px;height: 50px;"></image>
					
					<span style="font-size: 15px;margin-left: 20px;position: relative;top: -18px;"><b>{{item.name}}</b></span>
				</view>
					
				</view>
				
			</view>
			
			<view class="ljflzong">
				<view style="width: 4px;height: 17px;background-color: #FF5E81;margin-left: 10px;margin-top: 10px;border-radius: 15px;display: inline-block"></view>
				<span style="margin-left: 12px;font-size: 14px;color: #333333;"><b>可兑换商品</b></span>
				<view style="width: 335px;height: 100%;background-color: #FFFFFF;margin-left: 20px;margin-top: 10px;">
					<view class="ljfl" v-for="item in commodities" @click="gotospxq(item.commodityId)">
					<image :src="item.commodityimgs[0].pash" style="width: 50px;height: 50px;"></image>
					
					<span style="font-size: 15px;margin-left: 20px;position: relative;top: -18px;"><b>{{item.commodityName}}</b></span>
				</view>
					
				</view>
				
			</view>
			<view class="ljflzong">
				<view style="width: 4px;height: 17px;background-color: #FF5E81;margin-left: 10px;margin-top: 10px;border-radius: 15px;display: inline-block"></view>
				<span style="margin-left: 12px;font-size: 14px;color: #333333;"><b>讨论</b></span>
				<view style="width: 335px;height: 100%;background-color: #FFFFFF;margin-left: 20px;margin-top: 10px;">
					<view class="ljfl" v-for="item in discusses">
					
					
					<span @click="gototl(item.discussId)" style="font-size: 14px;color:#333333;margin-left: 20px;">{{item.title}}</span>
				</view>
					
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bsid:0,
				lisi:[
					{name:'奶茶',},
					{name:'喝奶茶',}
				],
				keyword:'',
				c:[],
				commodities:[],
				discusses:[],
				userid:1,
				ss:[],
				discusses:[],
			}
		},
		onLoad() {
			this.initss()
		},
		methods: {
			gotospxq(commodityid){
				uni.navigateTo({
					url:'../shangcheng/spxq?commodityid='+commodityid
				})
			},
			gototl(id){
				uni.navigateTo({
					url:'./tlxq?id='+id
				})
			},
			getclassxq(id){
				uni.navigateTo({
					url:'./fenleixq?id='+id
				})
			},
			dells(){
				uni.request({
					url:'http://localhost:9525/xkuser/ljp/dells',
					method: 'GET',
				   data: {
					   userid:this.userid,
				   },
				   dataType:'json',
				   success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						var result = res.data.message;
						console.log(res)
						
							
					},
				})	
			},
			initss(){
				uni.request({
					url:'http://localhost:9525/xkuser/ljp/getsearchhistory',
					method: 'GET',
				   data: {
					   userid:this.userid,
				   },
				   dataType:'json',
				   success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						var result = res.data.message;
						console.log(res)
						this.ss=res.data.data.map.ss
						console.log(this.ss)
						this.discusses=res.data.data.map.discusses
						
							
					},
				})	
			},
			getunions(keyword){
				console.log(this.keyword)
				uni.request({
					url:'http://localhost:9525/xkuser/ljp/getunion',
					method: 'GET',
				   data: {
					   keyword:keyword,
					   userid:this.userid,
				   },
				   dataType:'json',
				   success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						var result = res.data.message;
						console.log(result)
						this.c=res.data.data.unionmap.c
						this.commodities=res.data.data.unionmap.commodities
						this.discusses=res.data.data.unionmap.discusses
						this.bsid=1
						console.log(this.discusses)
						
							
					},
				})	
			},
			getunion(){
				console.log(this.keyword)
				uni.request({
					url:'http://localhost:9525/xkuser/ljp/getunion',
					method: 'GET',
				   data: {
					   keyword: this.keyword,
					   userid:this.userid,
				   },
				   dataType:'json',
				   success: (res) => {
						// var result = JSON.parse(res.data.data.message);
						var result = res.data.message;
						console.log(result)
						this.c=res.data.data.unionmap.c
						this.commodities=res.data.data.unionmap.commodities
						this.discusses=res.data.data.unionmap.discusses
						this.bsid=1
						console.log(this.c)
						
			
					},
				})	
			}
		}
	}
</script>

<style>
	.ljflzong{
		width: 100%;
		height: 100%;
		/* background-color: #18BC37; */
	}
	.ljfl{
		width: 300px;
		height: 50px;
		background-color: #3ED2E2;
		margin-top: 10px;
	}
	.yjg{
		width: 100%;
		height: 100%;
		/* background-color: #007AFF; */
	}
	.lb{
		width: 50px;
		height: 27px;
		background-color: #3ED2E2;
		border-radius: 25px;
		padding: 2px;
		margin-top: 5px;
		}
	.tl{
		width: 100%;
		height: 100px;
		background-color: #FFFFFF;
		margin-top: 5px;
	}
	.jl{
		width: 50px;
		height: 27px;
		background-color: #3ED2E2;
		border-radius: 25px;
		padding: 2px;
		float: left;
		margin-left: 10px;
	}
	.ls{
		width: 100%;
		height: 100px;
		background-color: #FFFFFF;
		margin-top: 30px;
	}
	.sq{
		width: 100%;
		height: 100%;
		/* background-color: #007AFF; */
	}
	.bj1{
			width:100%;
			height:150rpx;
			background-image: url(../../static/indeimg/xia.png);
			
		}
</style>
